<template>
  <div class="home_clue">
    <ITitle :title="'助力转化增长，客户深度触达'"></ITitle>
    <div :class="{ flex_left_right: !isMobile(), home_main_m: !isMobile() }">
      <ICard class="flex_right clue_item m_t_40" :row="item" v-for="(item, index) in dataList" :key="index">
        <template #default="{ row }">
          <div class="card_row">
            <div class="row_title font_18"> {{ row.title }}</div>
            <div class="row_dis font_14">{{ row.dis }}</div>
          </div>
        </template>
      </ICard>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ref, defineAsyncComponent } from 'vue'
  import { isMobile } from '@/utils'
  const ICard = defineAsyncComponent(() => import('@/components/comm/ICard.vue'))
  const ITitle = defineAsyncComponent(() => import('@/components/comm/ITitle.vue'))
  const dataList = ref<any[]>([
    {
      title: '公域引流+私域运营',
      dis: '助力增长获客，提升转化率。多途径深度触达。',
      img: 'clue_1',
    },
    {
      title: '广告线索接入',
      dis: '对接主流广告平台（字节、腾讯、抖音、快手）线索自动归集。',
      img: 'clue_2',
      type: 'template',
    },
    {
      title: '客户深度触达',
      dis: '电销工具支持，人工外呼+AI外呼，助力降本增效。',
      img: 'clue_4',
    },
    {
      title: '智能服务-AI大模型应用',
      dis: '智能对话自定义模版，自动智能识别精准意向客户，降低客服成本。',
      img: 'clue_3',
    },
  ])
</script>
<style scoped lang="less">
  .home_clue {
    .clue_item {
      position: relative;
      .card_row {
        position: absolute;
        bottom: 12%;
        left: 9%;
        z-index: 99;
        color: #ffffff;
        .row_title {
          font-weight: 600;
        }
        .row_dis {
          margin-top: 8px;
        }
      }
    }
  }
</style>
